<template>
  <div class="page-header mb-6 flex justify-between items-center">
    <BackButton :text="backText" :back-type="backType" :route-path="routePath" :loading="loading" />
    <el-tag type="info" size="large" effect="plain" v-if="title">
      {{ title }}
    </el-tag>
  </div>
</template>

<script setup lang="ts">
import BackButton from './BackButton.vue';

interface Props {
  /** 返回按钮文本 */
  backText?: string;
  /** 返回方式：'back' - 浏览器后退, 'route' - 路由跳转 */
  backType?: 'back' | 'route';
  /** 当backType为'route'时，跳转的路由路径 */
  routePath?: string;
  /** 页面标题 */
  title?: string;
  /** 是否显示加载状态 */
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  backText: '返回',
  backType: 'back',
  routePath: '',
  title: '',
  loading: false
});
</script>

<style scoped></style>
